<template>
  <view class="withdraw-record-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 记录列表 -->
    <scroll-view class="record-list" scroll-y>
      <view class="record-item" v-for="(record, index) in records" :key="index">
        <!-- 记录头部 -->
        <view class="record-header">
          <text class="amount">¥{{ record.amount }}</text>
          <text class="status" :class="record.status">{{ getStatusText(record.status) }}</text>
        </view>
        
        <!-- 记录详情 -->
        <view class="record-details">
          <view class="detail-item">
            <text class="label">提现方式</text>
            <text class="value">{{ record.withdrawType }}</text>
          </view>
          <view class="detail-item">
            <text class="label">提现账号</text>
            <text class="value">{{ record.account }}</text>
          </view>
          <view class="detail-item">
            <text class="label">申请时间</text>
            <text class="value">{{ record.applyTime }}</text>
          </view>
          <view class="detail-item" v-if="record.status !== 'pending'">
            <text class="label">处理时间</text>
            <text class="value">{{ record.processTime }}</text>
          </view>
          <view class="detail-item" v-if="record.status === 'failed'">
            <text class="label">失败原因</text>
            <text class="value error">{{ record.failReason }}</text>
          </view>
        </view>
      </view>
      
      <!-- 无记录提示 -->
      <view class="empty-tip" v-if="records.length === 0">
        <image src="/static/empty.png" mode="aspectFit" class="empty-icon"></image>
        <text>暂无提现记录</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import TechNavBar from '@/components/tech-nav-bar.vue'
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
  components: {
    TechNavBar,
    NavBar
  },
  
  data() {
    return {
      records: [],
      techId: ''
    }
  },
  
  onLoad() {
    // 从本地存储获取技师ID
    const userInfo = uni.getStorageSync('userInfo');
    this.techId = userInfo ? userInfo.techId : null;
    
    this.loadWithdrawRecords()
  },
  
  methods: {
    // 获取提现记录
    async loadWithdrawRecords() {
      if (!this.techId) {
        uni.showToast({
          title: '未获取到技师信息，请重新登录',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '加载中...'
      })
      
      try {
        // 获取token
        const token = uni.getStorageSync('token');
        
        // 使用uni.request发起请求
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `${uni.$config.baseUrl}/widthdrawRecord/widthdrawRecord/listAll`,
            method: 'GET',
            data: {
              technicianId: this.techId
            },
            header: {
              'Content-Type': 'application/json',
              'Authorization': 'Bearer ' + token
            },
            success: (response) => {
              resolve(response);
            },
            fail: (error) => {
              reject(error);
            }
          });
        });
        
        const result = res.data;
        console.log('result:', result)
        
        // 检查返回的数据结构
        if (result.rows && result.rows.length > 0) {
          console.log('第一条记录示例:', JSON.stringify(result.rows[0]));
        }
        
        if (result.code === 200) {
          this.records = result.rows.map(record => {
            // 根据账户类型确定提现方式
            const withdrawType = record.accountType === 1 ? '支付宝' : '银行卡';
            
            // 格式化账号显示
            let accountDisplay = '';
            if (record.accountType === 1) {
              // 支付宝账号脱敏
              accountDisplay = this.maskAccount(record.accountNo);
            } else {
              // 银行卡显示
              if (record.accountNo) {
                accountDisplay = `${record.bankName || ''}(${record.accountNo.substr(-4)})`;
              } else {
                accountDisplay = record.bankName || '未知银行';
              }
            }
            
            // 状态映射
            let status = '';
            switch(record.status) {
              case 0: status = 'pending'; break;
              case 1: status = 'success'; break;
              case 2: status = 'failed'; break;
              default: status = 'pending';
            }
            
            return {
              id: record.id,
              amount: record.amount.toFixed(2),
              status: status,
              withdrawType: withdrawType,
              account: accountDisplay,
              applyTime: record.createTime,
              processTime: record.updateTime,
              failReason: record.payFailReason || record.auditReason || ''
            };
          });
        } else {
          throw new Error(result.msg || '获取记录失败')
        }
      } catch (err) {
        console.error('获取提现记录失败:', err)
        uni.showToast({
          title: '获取记录失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 账号脱敏处理
    maskAccount(account) {
      if (!account) return '';
      
      // 邮箱类型
      if (account.includes('@')) {
        const parts = account.split('@');
        const name = parts[0];
        const domain = parts[1];
        
        if (name.length <= 3) {
          return `${name.substring(0, 1)}***@${domain}`;
        } else {
          return `${name.substring(0, 3)}***@${domain}`;
        }
      } 
      // 手机号类型
      else if (/^\d{11}$/.test(account)) {
        return account.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
      }
      // 其他类型
      else {
        if (account.length <= 4) {
          return '****';
        } else {
          return account.substring(0, 2) + '****' + account.substring(account.length - 2);
        }
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        pending: '处理中',
        success: '提现成功',
        failed: '提现失败'
      }
      return statusMap[status] || status
    }
  }
}
</script>

<style lang="scss" scoped>
.withdraw-record-container {
  min-height: 100vh;
  background: #F5F5F5;
  padding-bottom: 30rpx;
  
  .record-list {
    padding: 30rpx;
    
    .record-item {
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 40rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
      
      .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #F0F0F0;
        
        .amount {
          font-size: 48rpx;
          font-weight: bold;
          color: #333333;
        }
        
        .status {
          font-size: 32rpx;
          font-weight: 500;
          padding: 8rpx 20rpx;
          border-radius: 30rpx;
          
          &.pending {
            color: #FFA500;
            background-color: rgba(255, 165, 0, 0.1);
          }
          
          &.success {
            color: #07C160;
            background-color: rgba(7, 193, 96, 0.1);
          }
          
          &.failed {
            color: #FF4D4F;
            background-color: rgba(255, 77, 79, 0.1);
          }
        }
      }
      
      .record-details {
        .detail-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 24rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .label {
            font-size: 32rpx;
            color: #666666;
            font-weight: 500;
          }
          
          .value {
            font-size: 32rpx;
            color: #333333;
            
            &.error {
              color: #FF4D4F;
              font-weight: 500;
            }
          }
        }
      }
    }
    
    .empty-tip {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 150rpx 0;
      
      .empty-icon {
        width: 240rpx;
        height: 240rpx;
        margin-bottom: 30rpx;
      }
      
      text {
        font-size: 34rpx;
        color: #999999;
      }
    }
  }
}
</style> 